/**
 * 提供 全局可复用的 hooks
 * 函数封装的基本思想：
 * 1. 将相同的逻辑直接拷贝到函数中
 * 2. 不同的数据或逻辑通过函数参数传入
 * 3. 需要返回数据，就通过函数返回值返回
 */
import { AppDispatch, AppThunk, RootState } from '@/store'
import highlight from 'highlight.js'
import 'highlight.js/styles/dark.css'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'

/**
 * 定义一个泛型 自定义模块名
 * StateName 继承 RootState的键名作为类型
 */
/**
 * 作用：
 * 1. 分发异步action
 * 2. 获取分发后存储到redux的数据
 * 使用 ：
 * const data = useAction(异步action，模块名)
 * @param callBack 
 * @param stateName 
 * @returns 
 */
export function useAction<StateName extends keyof RootState>(callBack: () => AppThunk<void>, stateName: StateName) {
  const dispatch = useDispatch<AppDispatch>()
  useEffect(() => {
    dispatch(callBack())
  }, [dispatch, callBack])
  // 方法 1 
  return useSelector((state: RootState) => state[stateName])
  // 方法 2 
  // return useSelector<RootState, userState>((state) => state.user)
  // 方法 3 不用导包借助类型推导即可
  // RootState['user'] 可以获取某个对象属性的类型
  // return useSelector<RootState, RootState['user']>((state) => state.user)
}
// ========代码块高亮
// 1. 导包遍历，2. 引入样式
export const useCodeLight = () => {
  useEffect(() => {
    highlight.configure({
      // 忽略html特殊字符的警告
      ignoreUnescapedHTML: true
    })
    // 获取网页中所有代码元素，遍历代码块对其高亮处理
    const dgHtmlDom = document.querySelector('.dg-html')
    const codes = dgHtmlDom?.querySelectorAll<HTMLElement>('pre code')
    if (codes && codes.length > 0) {
      codes.forEach((el) => {
        highlight.highlightElement(el)
      })
      return
    }
  }, [])
}
export const useMove = (ref: HTMLDivElement | null, depend: any, type: string, mainRef?: HTMLDivElement | null) => {
  useEffect(() => {
    const divRef = ref
    if (!divRef) return
    if (type === 'top') {
      divRef.scrollTo({
        top: divRef.scrollHeight,
        behavior: 'smooth',
      })
    }
    if (type === 'bottom' && mainRef) {
      divRef.scrollTo({
        top: mainRef.scrollHeight,
        behavior: 'smooth',
      })
    }
  }, [depend, ref])
}